<!--
 * @Descripttion: 购物车
 * @version:
 * @Author: lhl
 * @Date: 2024-09-02 20:22:06
 * @LastEditors: lhl
 * @LastEditTime: 2024-09-08 22:33:40
-->
<template>
  <div>
    <p>购物车数量：{{ userInfo.counter }}</p>
    <p>getters：{{ userInfo.doubleNum }}</p>
    <p>actions：{{ userInfo.name }}</p>
    <p>isLogin：{{ isLogin }}</p>
    <p>utils方法集中管理：{{ utils.desensitize('13912345678', 3, 4) }}</p>
    <van-button
      type="primary"
      size="small"
      @click="handleAdd"
      >添加</van-button
    >
    <van-button
      type="primary"
      size="small"
      @click="handleUpdate"
      >更新</van-button
    >
  </div>
</template>
<script lang="ts" setup>
import { useUserInfo } from '@/store/user';
import { storeToRefs } from 'pinia';
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据
import utils from '@/utils';

const userInfo = useUserInfo();
const { isLogin } = storeToRefs(userInfo);
console.log(userInfo, 'userInfo', isLogin.value);

const handleAdd = () => {
  userInfo.increment();
};

const handleUpdate = () => {
  userInfo.$patch((state) => {
    state.name = 'pinia被玩懂了啊';
  });
};

console.log(utils.dateDiff('2021-09-01', '2021-09-02'));
</script>

<style lang="less" scoped></style>
